<template>
  <!-- <h1>user---------{{this.$route.params.id}}</h1> -->
  <div class="g-bd">
    <!-- 个人信息 -->
    <dl class="m-proifo">
      <dt class="picdt">
        <img
          v-lazy="userinfo.profile.avatarUrl"
          class="userhead"
        >
        <div class="btm">更换头像</div>
      </dt>
      <dd>
        <div class="name">
          <div class="wrap">
            <!-- 昵称 -->
            <span class="tit">{{userinfo.profile.nickname}}</span>
            <!-- 等级 -->
            <span class="lev">Lv{{userinfo.level}}</span>
            <!-- 性别 -->
            <span
              class="sex iconfont icon-nvxing"
              v-if="userinfo.profile.gender===2"
            ></span>
            <span
              class="sex iconfont icon-lujing"
              v-else-if="userinfo.profile.gender===1"
            ></span>
            <!-- 发私信按钮 -->
            <a
              href="#"
              class="sixinbtn"
              v-if="!isMyself"
            >
              <i class="iconfont icon-xinfeng">发私信</i>
            </a>
            <!-- 关注按钮 -->
            <a
              href="#"
              class="guanbtn"
              v-if="!isMyself && !haveCollect"
            >
              <i class="iconfont icon-hao">关注</i>
            </a>
            <!-- 已关注+取消关注按钮 -->
            <a
              href="#"
              class="guanbtn hovenbtn"
              v-if="!isMyself && haveCollect"
            >
              <i class="iconfont icon-dui nohover">已关注</i>
              <i class="iconfont hover">取消关注</i>
            </a>
          </div>
          <div
            class="edit"
            v-if="isMyself"
          >
            <a
              href="#"
              @click.prevent="goEditInfo(userId)"
            >编辑个人资料</a>
          </div>
          <div
            class="edit"
            v-if="!isMyself && userinfo.profile.authStatus===1"
          >
            <a
              href="#"
              @click.prevent="goSongInfo(userinfo.profile.artistId)"
            >查看歌手页</a>
          </div>
        </div>
        <!-- 达人、、、、图标 -->
        <div
          class="renz"
          v-if="haveRenz"
        >
          <p v-if="userinfo.profile.allAuthTypes[0].type===2"><i class="iconfont iconfont2"></i> <span>{{this.userinfo.profile.allAuthTypes[0].desc}}</span> </p>
          <p v-if="userinfo.profile.allAuthTypes[0].type===207"><i class="iconfont iconfont207"></i> <span>{{this.userinfo.profile.allAuthTypes[0].desc}}</span> </p>
          <p v-if="userinfo.profile.allAuthTypes[0].type===4"><i class="iconfont iconfont4"></i>
            <span>{{this.userinfo.profile.allAuthTypes[0].desc}}</span>
            <span
              class="tags"
              v-for="(item,index) in this.userinfo.profile.allAuthTypes[0].tags"
              :key="index"
            >{{item}}</span>
          </p>
        </div>
        <ul class="data">
          <li>
            <a
              href="#"
              @click.prevent="goevent"
            >
              <strong>{{userinfo.profile.eventCount}}</strong>
              <span>动态</span>
            </a>
          </li>
          <li>
            <a
              href="#"
              @click.prevent="gofollow"
            >
              <strong>{{userinfo.profile.follows}}</strong>
              <span>关注</span>
            </a>
          </li>
          <li>
            <a
              href="#"
              @click.prevent="gofan"
            >
              <strong>{{userinfo.profile.followeds}}</strong>
              <span>粉丝</span>
            </a>
          </li>
        </ul>
        <div
          class="inf"
          v-if="userinfo.profile.signature"
        >
          <span>个人介绍：{{userinfo.profile.signature}}</span>
        </div>
        <div
          class="inf"
          v-if="userinfo.profile.province!==0"
        >
          <span>所在地区：{{userinfo.profile.province}}省 - {{userinfo.profile.city}}市</span>
        </div>
        <div class="inf">
          <span v-if="isShowBind">社交网络：</span>
          <ul class="u-logo">
            <li
              v-for="(item,index) in userinfo.bindings"
              :key="index"
            >
              <a
                href="item.url"
                v-if="item.type===2"
              >
                <i
                  class="iconfont"
                  title="新浪微博"
                ></i>
              </a>

            </li>
          </ul>
        </div>
      </dd>
    </dl>
    <router-view :userId="userId"></router-view>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 当前访问主页的id
      userId: 0,
      haveRenz: false,
      // 用户信息
      userinfo: {
        profile: {
          nickname: ''
        }
      },
      isShowBind: false,
      collectList: [],
      haveCollect: false,
      isMyself: false
    }
  },
  computed: {
    // 热门推荐、新碟数据、飙升榜数据
    ...mapState(['loginID'])
  },
  created () {
    this.getUserinfo()
  },
  watch: {
    $route (to, from) {
      // console.log('user页的route监听')
      // console.log(to.query.id, from.query.id)
      this.getUserinfo()
    },
  },
  methods: {
    // key () {
    //   return Math.random();
    // },
    async getUserinfo () {
      this.userId = this.$route.query.id
      // console.log('user获得的用户id：', this.userId, '----------loginID:', this.loginID)
      if (this.userId == this.loginID) { this.isMyself = true }
      else { this.isMyself = false }
      let res = await axios.get('https://autumnfish.cn//user/detail?uid=' + this.userId)
      this.userinfo = res.data;
      // console.log('userinfo')
      // console.log(this.userinfo)
      for (let i = 0; i < this.userinfo.bindings.length; i++) {
        if (this.userinfo.bindings[i].type === 2) {
          this.isShowBind = true;
        }
      }
      if (this.userinfo.profile.allAuthTypes.length > 0) { this.haveRenz = true }

      // 判断有无关注该用户
      let resfou = await axios.get('https://autumnfish.cn//user/follows?uid=' + this.loginID)
      this.collectList = resfou.data.follow
      for (let i = 0; i < this.collectList.length; i++) {
        this.collectList[i] = this.collectList[i].userId
      }

      this.haveCollect = this.collectList.some((item, index) => {
        return item === this.userId
      })

    },
    getNewid (val) {
      this.userId = val
      this.getUserinfo()
    },
    goEditInfo (id) {
      this.$router.push({ name: 'useredit', params: { id: id } })
      // this.$router.push({ name: 'updateinfo', params: { id: id } })
    },

    goevent () {
      this.$router.push({ path: '/user/event', query: { id: this.userId } })
    },
    gofollow () {
      this.$router.push({ path: '/user/follows', query: { id: this.userId } })
    },
    gofan () {
      this.$router.push({ path: '/user/fans', query: { id: this.userId } })
    },
    goSongInfo (id) {
      this.$router.push({ path: '/artist', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.g-bd {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  padding: 40px;
  // 个人信息
  .m-proifo {
    margin-bottom: 43px;
    height: 188px;
    dt {
      float: left;
      width: 188px;
      margin-right: 40px;
      position: relative;
      .userhead {
        display: block;
        width: 180px;
        height: 180px;
        padding: 3px;
        background: #fff;
        border: 1px solid #d5d5d5;
      }

      .btm {
        position: absolute;
        left: 4px;
        bottom: 3px;
        display: block;
        width: 180px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #fff;
        background: #8e8e8e;
        opacity: 0.8;
        display: none;
      }
    }
    .picdt:hover {
      .btm {
        display: block;
      }
    }
    dd {
      margin: 0;
      padding: 0;
      float: left;
      width: 670px;
      .name {
        padding-bottom: 12px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        .edit {
          a {
            text-decoration: none;
            color: #333;
            background-color: #f8f8f8;
            font-size: 12px;
            display: inline-block;
            width: 112px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e7e7e7;
          }
        }
        .wrap {
          .tit {
            font-size: 22px;
            font-weight: normal;
            line-height: 30px;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
          .lev {
            display: inline-block;
            height: 19px;
            // overflow: hidden;
            // padding-left: 29px;
            line-height: 21px;
            color: #e03a24;
            font-size: 14px;
            font-weight: bold;
            font-style: italic;
            margin: 0 10px;
          }
          .sex {
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 20px;
            margin: 0 5px;
          }
          .icon-nvxing {
            color: pink;
          }
          .icon-lujing {
            color: skyblue;
          }
          .sixinbtn {
            display: inline-block;
            width: 75px;
            height: 31px;
            margin-right: 15px;
            height: 29px;
            line-height: 29px;
            background: #f2f2f2;
            color: #666;
            text-decoration: none;
            padding: 0 5px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 20px;
            text-align: center;
            .iconfont {
              font-size: 12px;
            }
          }
          .guanbtn {
            display: inline-block;
            width: 75px;
            height: 31px;
            height: 29px;
            line-height: 29px;
            background: #3c89d3;
            color: #fff;
            text-decoration: none;
            padding: 0 5px;
            border-radius: 4px;
            .iconfont {
              font-size: 12px;
            }
            text-align: center;
            .nohover {
              display: inline-block;
            }
            .hover {
              display: none;
            }
          }
          .hovenbtn:hover {
            .hover {
              display: inline-block;
            }
            .nohover {
              display: none;
            }
          }
        }
      }
      .renz {
        margin-top: 8px;
        line-height: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        p {
          margin: 0;
          padding: 0;
          color: #666;
          font-size: 14px;
          display: flex;
          justify-content: left;
          align-items: center;
          .iconfont {
            display: inline-block;
            margin-right: 6px;
            width: 68px;
            height: 20px;
          }
          .iconfont2 {
            background-image: url(../../assets/image/icon2.png);
            background-position: 0 -480px;
          }
          .iconfont207 {
            background-image: url(../../assets/image/icon2.png);
            background-position: -75px -480px;
          }
          .iconfont4 {
            background-image: url(../../assets/image/icon2.png);
            background-position: -150px -480px;
          }
          .tags {
            display: inline-block;
            height: 16px;
            margin-left: 5px;
            padding: 0 2px;
            vertical-align: middle;
            color: rgba(0, 0, 0, 0.4);
            font-size: 12px;
            line-height: 16px;
            text-align: center;
            border: solid 1px rgba(0, 0, 0, 0.3);
            border-radius: 2px;
          }
          span {
            display: inline-block;
          }
        }
      }
      .data {
        margin: 0;
        padding: 0;
        height: 41px;
        margin-top: 10px;
        margin-bottom: 15px;
        display: flex;
        li {
          list-style: none;
          padding-right: 40px;
          a {
            text-decoration: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #666;
            width: 26px;
            height: 39px;
            strong {
              font-size: 24px;
              font-weight: normal;
              cursor: pointer;
            }
            span {
              font-size: 12px;
            }
          }
        }
      }
      .inf {
        margin-bottom: 5px;
        line-height: 21px;
        color: #666;
        font-size: 12px;
        display: flex;
        justify-content: left;
        align-items: center;
        .u-logo {
          margin: 0;
          padding: 0;
          display: flex;
          li {
            list-style: none;
            margin-left: 8px;
            height: 22px;
            a {
              text-decoration: none;
              .iconfont {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url(../../assets/image/logo.png);
                background-position: 0 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
